<%--
  Created by IntelliJ IDEA.
  User: liang
  Date: 2021/7/3
  Time: 23:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>viewUser</title>
    <script src="http://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
    <style>
        table,thead,tbody,tr,th,td{
            border-collapse: collapse;
        }
    </style>
    <script>
        $(function () {
                loadUserData();
                $("#tb").on("click","#del",function () {
                    var userId = $(this).parent().parent().find("td:first").text();
                    console.log(typeof userId);
                    $.ajax({
                        url:'deleteUser.do',
                        data:{userId:userId},
                        success:function () {
                            loadUserData();
                        }
                    })
                })
        });
        function loadUserData() {
            $("#tb").empty();//刷新整个列表
            $.ajax({
                url:'viewUser.do',
                success:function (data) {
                    $.each(data,function (index, user) {
                        var tr=$("<tr\>");
                        var userid=$("<td>"+user.userId+"</td>");
                        var username=$("<td>"+user.username+"</td>");
                        var password=$("<td>"+user.password+"</td>");
                        var opt=$("<td><a id='del' href='javascript:void(0)'>删除</a></td>");
                        tr.append(userid)
                            .append(username)
                            .append(password)
                            .append(opt);
                        $("#tb").append(tr);
                    })
                }
            })
        }
    </script>
</head>
<body>
    <table border="1">
        <caption>账户信息</caption>
        <thead>
        <tr>
            <th>userId</th>
            <th>username</th>
            <th>password</th>
            <th>option</th>
        </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
</body>
</html>
